<template>
  <el-menu
    class="aside-menu"
    :collapse-transition="false"
    :collapse="menuCollapse"
    :default-active="$route.path"
  >
    <router-link :to="{ name: dashboard.name }">
      <el-menu-item :index="dashboard.path">
        <i :class="'el-icon-' + dashboard.icon"></i>
        <span slot="title">{{ dashboard.title }}</span>
      </el-menu-item>
    </router-link>
    <template v-for="item in accountRouters">
      <router-link v-if="!item.children" :to="{ name: item.name }" :key="item.name">
        <el-menu-item :index="item.path">
          <i :class="'el-icon-' + item.meta.icon"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </router-link>
      <el-submenu v-if="item.children && item.meta.access" :key="item.name" :index="item.path">
        <template slot="title">
          <i :class="'el-icon-' + item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <template v-for="it in item.children">
          <router-link
            class="aside-menu-link"
            :key="it.name"
            v-if="!it.meta.hidden"
            :to="{ name: it.name }"
          >
            <el-menu-item :index="it.path">{{ it.meta.title }}</el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapGetters } from "vuex";
// lib
// components & widgets
// config
// script & utils & public
import { StoreState } from "@/store";
// controller & service & logic
// interface
import { DashboardRouteTag } from "@/public/model/RouteTag";
// 其它

@Component({
  computed: mapGetters(["accountRouters"]),
})
export default class AsideMenu extends Vue {
  dashboard = DashboardRouteTag;
  mounted() {
    //
  }
  get menuCollapse() {
    const state: StoreState = this.$store.state;
    return state.app.menuCollapse;
  }
}
</script>

<style lang="scss">
.aside-menu {
  height: 100%;
}
.aside-menu:not(.el-menu--collapse) {
  width: 260px;
}
.el-submenu__title{
  width: 260px;
}
.aside-menu-link {
  display: block;
  overflow: hidden;
}
.el-submenu .el-menu {
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
}
.el-menu-item.is-active {
    color: #00cc8b;
}
</style>
